<script setup lang="ts">
import myTopic from "@/composables/myTopic.ts";
const {addCat} = myTopic();
const form = reactive({
  title:'',
  icon:'WaterfallsH'
})
const router = useRouter();
const tabs = ref([
  {label:'帖子大类添加',routeName:'cat.add'},
  {label:'帖子大类编辑',routeName:'cat.edit',switchShow:true},
]);
const onSubmit = async ()=>{
  try {
    await addCat(form);
    await router.push({name:'cat.index'})
  }catch (error){

  }
}
</script>

<template>
<main class="cat_add">
  <my-tab :tabs="tabs"/>
  <el-card shadow="never">
    <el-form label-width="120px">
      <el-form-item class="item" label="帖子大类标题">
        <input v-model="form.title" v-clearError="'title'"/>
        <my-error name="title"/>
      </el-form-item>
      <el-form-item class="item" label="帖子大类Icon">
        <input v-model="form.icon" v-clearError="'icon'"/>
        <my-error name="icon"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">创建</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</main>
</template>

<style lang="scss" scoped>
main.cat_add{
  @apply p-3;
  .item{
    input{
      @apply border border-slate-400 rounded outline-slate-400 py-[2px] px-2 w-1/3;
    }
  }
}
</style>